<template>
  <div style="text-align: center">
    <van-row gutter="5">
      <van-col  :span="8" v-for="(img , index) in imgData.thumbnail" >
        <van-image style="width: 100%;  aspect-ratio: 1 "  :src="img"  fit="cover"  @click = "showBig(index)" >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </van-col>
      <van-col v-if="loadingShow"  :span="8" v-for="(item, index) in imgData.vd_loading"  >
          <div v-if="!imgData.vd_loading[index]">
              <van-loading size="20x" type="spinner" color="#1989fa" />
          </div>
      </van-col>
      <van-col  :span="8" v-for="(item, index) in imgData.video"  >
        <video :ref="el => setVideoRef(el, index)" v-show="imgData.vd_loading[index]"  style="width: 100%;  aspect-ratio: 1 ; background-color: black"
               playsinline  muted = "true"  loop :src= "item" @click = "showPreV(index)" ></video>
      </van-col>
    </van-row>
  </div>

  <div style="text-align: center">
    <van-image-preview
        v-model:show="imgData.videoPreview"
        :images="imgData.video"
        :close-on-click-image="false"
        :start-position = imgData.video_index
        :closeable = "true"
        :before-close="stopVideo"
    >
      <template #image="{ src }">
        <video style="width: 85%;"
               ref="videoPre"
               autoplay
               loop
               playsinline
               controls muted = "true">
          <source :src="src" />
        </video>
      </template>
    </van-image-preview>
  </div>
</template>

<script setup>

import {onMounted, onUnmounted,reactive,watch, ref, unref} from "vue";
import {get_img} from "@/axios/weibo";
import { showImagePreview } from 'vant';

const loadingShow=ref(false);
//video标签
const videoPre = ref(null);

const videoRefs= reactive({});

const props = defineProps([
   "file_data"])

const imgData = reactive({
    videoPreview : false,
    show_dialog: false,
    thumbnail: [],
    big_img:[],
    video:[],
    show_index:0,
    video_index:0,
    vd_loading:[],
})

const setVideoRef = (el, index) => {
  if (el) {
    videoRefs[index] = el;
    if (observer) {
      console.log("====>>>>")
      observer.observe(el);
    }
  } else {
    if (observer && videoRefs[index]) {
      observer.unobserve(videoRefs[index]);
    }
    delete videoRefs[index];
  }
};

const stopVideo = () => {
  if (videoPre.value) {
    videoPre.value.pause(); // 暂停视频
  }
  return true;
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 视频进入视口
      entry.target.play();
    } else {
      // 视频离开视口
      entry.target.pause();
    }
  });
}, {
  threshold: 1,
  rootMargin: '0px'
});

const showPreV = (n) =>{
  imgData.video_index = n
  imgData.videoPreview = true
}

const open_img = () =>  showImagePreview({
    images: imgData.big_img,
    startPosition: imgData.show_index,

});

const showBig = (ad) =>{
    imgData.show_index = ad
    imgData.show_dialog = true
    if(imgData.big_img.length  == 0) {
        Array.from(props.file_data.images).forEach((e,index )=> {
            get_img({"path": e.filePath + e.fileName}).then(res => {
                imgData.big_img[index] = URL.createObjectURL(res.data)
            }).catch(err => {

            })
        })
    }

    open_img()

}
const getImg = ()=>{
    imgData.vd_loading = []
    if(props.file_data.thumbnail.length > 0){
    Array.from(props.file_data.thumbnail).forEach(e=>{
        get_img({"path" : e.filePath + e.fileName}).then(res=>{
            imgData.thumbnail.push(URL.createObjectURL(res.data))
        }).catch(err=>{

        })
    })
    }

    if(props.file_data.videos.length > 0){
      // observer.observe(videoPre.value)
      loadingShow.value = true
      Array.from(props.file_data.videos).forEach((e,index)=>{
        imgData.vd_loading.push(false)
        get_img({"path" : e.filePath + e.fileName}).then(res=>{
          const blob = new Blob([res.data], { type: 'video/mp4' });
          imgData.video.push(URL.createObjectURL(blob))
          imgData.vd_loading[index] = true
          if(imgData.vd_loading.every(e=>{return e})){
              loadingShow.value = false
          }

        }).catch(err=>{

        })
      })
    }
}

watch(()=>props.file_data,
    ()=>{

        getImg()
})
onMounted(()=>{
    getImg()
})
onUnmounted(()=>{
  imgData.thumbnail.forEach(e=>{
    URL.revokeObjectURL(e)
  })
  imgData.big_img.forEach(e=>{
    URL.revokeObjectURL(e)
  })
  imgData.video.forEach(e=>{
    URL.revokeObjectURL(e)
  })

})

</script>

<style scoped>

</style>